<template>
  <div class="index">
    <!-- 动态时间 -->
    <div class="time">
      <h2>
        亲爱的管理员您好，欢迎使用比亚迪王朝管理系统，当前时间为：{{ nowDate }}
        {{ nowWeek }} {{ nowTime }}
      </h2>
    </div>
    <!-- four块 -->
    <div class="blocks" v-if="data">
      <div class="block" v-for="item in data" :key="item.cid">
        <div class="po_one">
          <i class="el-icon-user-solid"></i>
        </div>
        <h2>{{ item.titles }}</h2>
        <br /><br />
        <h2>{{ item.numbers }}</h2>
        <hr />
        <div class="block_b">
          <i class="el-icon-s-check">&nbsp;&nbsp;{{ item.downs }}</i>
        </div>
      </div>
      <div class="block">
        <div class="po_two">
          <i class="el-icon-s-goods"></i>
        </div>
        <h2>收入</h2>
        <br /><br />
        <h2>$7000,00</h2>
        <hr />
        <div class="block_b">
          <i class="el-icon-s-shop">&nbsp;&nbsp;过去24小时</i>
        </div>
      </div>
      <div class="block">
        <div class="po_three">
          <i class="el-icon-setting"></i>
        </div>
        <h2>固定问题</h2>
        <br /><br />
        <h2>74</h2>
        <hr />
        <div class="block_b">
          <i class="el-icon-s-help">&nbsp;&nbsp;其他问题</i>
        </div>
      </div>
      <div class="block">
        <div class="po_four">
          <i class="el-icon-document-copy"></i>
        </div>
        <h2>已用空间</h2>
        <br /><br />
        <h2>30/256GB</h2>
        <hr />
        <div class="block_b">
          <i class="el-icon-warning-outline">&nbsp;&nbsp;获取更多空间。。</i>
        </div>
      </div>
    </div>
    <!-- table -->
    <list />
    <!-- echarts -->
    <div class="echarts">
      <div id="main"></div>
      <div id="mine"></div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import list from "./list.vue";
export default {
  components: { list },
  data() {
    return {
      nowTime: "",
      nowDate: "",
      nowWeek: "",
      data: "",
    };
  },
  methods: {
    // 动态时间
    setNowTimes() {
      let myDate = new Date();
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let min = String(
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes()
      );
      let sec = String(
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds()
      );
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.nowDate = yy + "年" + mm + "月" + dd + "日";
      this.nowTime = hou + ":" + min + ":" + sec;
      this.nowWeek = week;
    },
    // 饼状图
    callser() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "王朝售车型图",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "car",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "唐" },
              { value: 735, name: "宋" },
              { value: 580, name: "元" },
              { value: 484, name: "秦" },
              { value: 300, name: "汉" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 柱状图
    zhu() {
      var myChart = echarts.init(document.getElementById("mine"));
      var option = {
        xAxis: {
          type: "category",
          data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    const url = "http://localhost:9000/neirong";
    this.axios.get(url).then((res) => {
      console.log(res);
      this.data = res.data;
      console.log(this.data);
    });

    // 每秒刷新时间
    this.timer = setInterval(() => {
      this.setNowTimes();
    }, 1000);

    // echars调用
    this.callser();
    this.zhu();
  },
};
</script>

<style lang="scss">
// 动态时间
.time {
  margin: 15px 15px 20px auto;
  width: 98%;
  height: 60px;
  line-height: 60px;
  color: #fff;
  background-color: rgb(5, 68, 118);
}
.time h2 {
  padding-left: 20px;
}

// four 块
.blocks {
  margin-top: 70px;
  width: 100%;
  height: 150px;
  margin-bottom: 70px;
  // background-color: red;
}
.block {
  float: left;
  margin-left: 53px;
  width: 20%;
  height: 150px;
  background-color: #fff;
  border-radius: 5px;
}
.po_one {
  margin-top: -35px;
  margin-left: 20px;
  border-radius: 5px;
  width: 80px;
  height: 80px;
  background-color: rgb(85, 174, 89);
}
.po_one i,
.po_two i,
.po_three i,
.po_four i {
  color: #fff;
  margin-left: 19px;
  margin-top: 18px;
  font-size: 40px;
}
.block h2 {
  float: right;
  margin-top: -30px;
  margin-right: 20px;
}
.block_b i {
  color: #000;
  margin-left: 20px;

  font-size: 20px;
}
.po_two {
  margin-top: -35px;
  margin-left: 20px;
  border-radius: 5px;
  width: 80px;
  height: 80px;
  background-color: rgb(255, 161, 30);
}
.po_three {
  margin-top: -35px;
  margin-left: 20px;
  border-radius: 5px;
  width: 80px;
  height: 80px;
  background-color: rgb(237, 78, 75);
}
.po_four {
  margin-top: -35px;
  margin-left: 20px;
  border-radius: 5px;
  width: 80px;
  height: 80px;
  background-color: rgb(13, 183, 203);
}
hr {
  margin-top: 25px;
  width: 83%;
}
.block_b {
  margin-top: 13px;
  height: 20px;
  line-height: 20px;
  width: 250px;
}
.block_b i {
  font-size: 14px;
}

//echarts
.echarts {
  width: 92%;
  height: 450px;
  // background-color:Blue;
  margin: 0 auto;
}

#main {
  float: left;
  //  background-color: red;
  width: 600px;
  height: 400px;
  color: #000;
}

#mine {
  float: right;
  //  background-color: red;
  width: 600px;
  height: 400px;
  color: #000;
}
</style>